<template>
	<!-- 选择产品属性  多选和单选的情况  父组件gz-product-dispose -->
	<div>
		<div @click="openPicker($event)" class="weui-cell_access">
		  <div class="select-box weui-cell__ft" style="padding: 9px 0px;">
			<div class="left" v-if="value1.length > 0">
			  <span>{{valueDispose(value1)}}</span>
			</div>
			<div class="left" v-else>
			  <span style="color: #C9CDD4;">{{placeholder ? placeholder : '请选择'}}</span>
			</div>
		  </div>
		  <slot :value="valueDispose(value1)"></slot>
		</div>
		<group v-if="type == 'proSelectRadio'">
		  <popup-picker :show.sync="showPopupPicker" :show-cell="false" confirm-text="确定" :data="datalist"
			v-model="value1" @on-show="onShow" @on-hide="onHide" :show-name="true" :disabled="disabled"
		  @on-change="onChange"></popup-picker>
		</group>
		<group v-if="type == 'proSelectCheckbox'">
		  <van-popup v-model="showPopupPicker" position="bottom" round>
        		<van-nav-bar title="" left-text="取消" right-text="确定" @click-left="showPopupPicker = false" @click-right="onChange(value2)"></van-nav-bar>
				<div class="select-substance" v-if="datalist.length>0">
					<van-checkbox-group v-model="value2" shape="square">
						<div class="substance-li" v-for="item in datalist[0]" :key="item.id">
							<div class="left-icon">
								<van-checkbox :name="item.key">{{item.name}}</van-checkbox>
							</div>
						</div>
					</van-checkbox-group>
				</div>
			</van-popup>
		</group>
	</div>
  </template>
  
  <script>
	import {
	  PopupPicker,
	  Datetime,
	  Group
	} from 'vux'
  
	export default {
	  components: {
		PopupPicker,
		Datetime,
		Group
	  },
	  props: {
		type: {
		  type: String,
		  default: ''
		},
		// 如为多列选择器则放多个数组
		datalist: {
		  type: Array,
		  default: () => [[]]
		},
		data: {
		  type: Array,
		  default: () => []
		},
		placeholder: {
		  type: String,
		  default: ''
		},
		disabled: {
		  type: Boolean,
		  default: false
		}
	  },
	  model: {
		prop: 'data',
		event: 'handleChange'
	  },
	  data() {
		return {
		  value1: this.data?this.data:[],
		  date: '',
		  showPopupPicker: false,
		  value2: [],  //下拉多选的数据  防止数据联动
		}
	  },
	  created(){
	  },
	  methods: {
		openPicker(vnode) {
		  if(this.disabled || vnode.target.disabled) return
		  this.showPopupPicker = true
		  this.value2 = JSON.parse(JSON.stringify(this.value1));  //多选的时候拷贝防止没确定的时候切换多选框数据联动
		},
		onChange(val) {
			if(this.type == 'proSelectCheckbox'){
				this.value1 = JSON.parse(JSON.stringify(this.value2));
			}
			this.valueDispose(val);
			this.$emit('handleChange', val)
			this.showPopupPicker = false
		},
		onShow() {
		  this.$emit('handleShow')
		},
		onHide(type) {
		  this.$emit('handleHide', type)
		},
		valueDispose(e) {
			var List = this.datalist[0]
			if(this.type == 'proSelectRadio'){  //下拉-单选
				var arr = e.join(' ');
				for(var i in List){
					if(List[i].value == arr) return List[i].name;
				}
			}else if(this.type == 'proSelectCheckbox'){  //下拉-多选
				var sz = [];
				if(e.length>0){
					e.forEach(element => {
						for(var i in List){
							if(List[i].value == element){
								sz.push(List[i].name)
							}
						}
					});
				}
				return sz.join(',');
			}
		}
	  }
	}
  </script>
  
<style lang="less" scoped>
.select-substance {
	min-height: 30vh;
	max-height: 60vh;
	border-top: 1px solid rgb(242, 242, 242);
	padding: 1.2rem 2rem;
	overflow: auto;

	.substance-li {
		padding: 1.2rem 0;
		border-bottom: 1px solid rgba(229, 230, 235, 0.5);
		&:last-child {
			border-bottom: 0;
		}
	}
}
/deep/.van-nav-bar__right{
	.van-nav-bar__text{
		font-size: 16px;
		color: var(--primary-color);
	}
}
/deep/.van-nav-bar__left{
	.van-nav-bar__text{
		font-size: 16px;
		color: #828282;
	}
}
/deep/.van-checkbox__icon--checked .van-icon {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
	border-radius: 0.2rem;
}
/deep/.van-checkbox__icon--round .van-icon {
	border-radius: 0.02rem;
}
.select-box .left{
	color: #000000;
    font-size: 17px;
}
</style>
  